<template>
  <div>
    <van-tabs v-model="activeName" @click="onClick">
        <van-tab v-for="item in brotherCategory" :key="item.id" :name="item.id" :title="item.name">
           <h1> {{item.name}}</h1>
           <h3>{{item.front_name}}</h3>
        </van-tab>
    </van-tabs>
    <ul>
        <li v-for="item in goodsList" @click='goto(item.id)' :key="item.id">
            <img :src="item.list_pic_url">      
            <p>{{item.name}}</p>
            <span>{{item.retail_price|Rmb}}</span>
        </li>
    </ul>
  </div>
</template>

<script>
// 导入请求
import {getChannel,getChannelArr} from "@/https/http"
export default {    
    data(){
        return{
            activeName:'',//切换时的id
            brotherCategory:[],//标签栏数组
            goodsList:[],//商品数组
        }
    },
    mounted(){
        this.activeName = this.$route.query.id-0
        getChannel(this.$route.query).then(res=>{
            this.brotherCategory = res.data.data.brotherCategory
        })
        let obj = {
                categoryId:String(this.activeName),
                page:1,
                size:100
            }
            getChannelArr(obj).then(res=>{
                console.log(res);
                this.goodsList = res.data.data.goodsList
            })
    },
    methods:{
        onClick(name,title){
            this.name = name
            console.log(name,title);
            let obj = {
                categoryId:String(name),
                page:1,
                size:100
            }
            getChannelArr(obj).then(res=>{
                console.log(res);
                this.goodsList = res.data.data.goodsList
            })
        },
        goto(ids){
            console.log(ids);
            this.$router.push({path:'/detail',query:{id:ids}});
        }
    }
}
</script>

<style lang='less' scoped>
h1,h3{
    text-align: center;
    margin: 30px;
}
 ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px;
    li{
        text-align: center;
        width: 49%;
        img{
            width: 100%;
        }
        p{
            font-size: 18px;
            margin: 10px;
        }
        span{
            font-size: 20px;
            color: red;
        }
    }
}
</style>